<template>
  <div class="resource-base">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>基础信息</span>
        </div>
      </template>
      <div class="base-container">
        <div class="log-item">
          <span class="log-time">状态：</span>
          <span class="log-content">
            <div
              :class="{
                circle: true,
                redBg: monitorData.status === 2,
                greenBg: monitorData.status === 1,
              }"
            ></div>
            <div
              :class="{
                red: monitorData.status === 2,
                green: monitorData.status === 1,
              }"
            >
              {{
                status[monitorData.status] && status[monitorData.status].name
              }}
            </div>
          </span>
        </div>
        <div class="log-item">
          <span class="log-time">集群：</span>
          <span class="log-content">{{ monitorData.clusterName }}</span>
        </div>
        <div class="log-item">
          <span class="log-time">计算节点：</span>
          <span class="log-content">{{ monitorData.computerName }}</span>
        </div>
        <div class="log-item">
          <span class="log-time">镜像/靶标：</span>
          <el-tooltip
            :content="monitorData.baseImage"
            placement="top"
            effect="light"
          >
            <span class="text-ellipsis">{{ monitorData.baseImage }}</span>
          </el-tooltip>
        </div>
        <div class="log-item">
          <span class="log-time">场景：</span>
          <el-tooltip
            :content="monitorData.sceneName"
            placement="top"
            effect="light"
          >
            <span class="text-ellipsis">{{ monitorData.sceneName }}</span>
          </el-tooltip>
        </div>
      </div>
    </el-card>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>资源利用</span>
        </div>
      </template>
      <div class="base-container">
        <div class="log-item">
          <span class="log-time">CPU利用率：</span>
          <div
            class="log-content"
            style="width: 85%"
            v-if="monitorData.cpuRate && monitorData.cpuRate.length > 0"
          >
            <el-progress
              :percentage="
                monitorData.cpuRate[monitorData.cpuRate.length - 1]
              "
              :stroke-width="20"
              striped
              :text-inside="true"
              style="width: 100%"
            />
          </div>
        </div>
        <div class="log-item">
          <span class="log-time">内存利用率：</span>
          <div
            class="log-content"
            style="width: 85%"
            v-if="monitorData.memoryRate && monitorData.memoryRate.length > 0"
          >
            <el-progress
              :percentage="
                monitorData.memoryRate[monitorData.memoryRate.length - 1]
              "
              :stroke-width="20"
              striped
              :text-inside="true"
              style="width: 100%"
            />
          </div>
        </div>
        <div class="resource-item">
          <span class="log-time">IPS：</span>
          <span class="log-content">
            <div v-for="ips in monitorData.ips">{{ ips.mac }}</div>
          </span>
        </div>
      </div>
    </el-card>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>备注</span>
        </div>
      </template>
      <div class="chart-container">
        {{ monitorData.remarks }}
      </div>
    </el-card>
  </div>
  <!-- 资源使用监控 -->
  <div class="resource-monitor">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>CPU 使用率</span>
          <span class="value-text">{{ monitorData.cpuUsage || "0" }}%</span>
        </div>
      </template>
      <div class="chart-container">
        <div ref="cpuChartRef" class="chart"></div>
      </div>
    </el-card>

    <el-card>
      <template #header>
        <div class="card-header">
          <span>内存使用率</span>
          <span class="value-text">{{ monitorData.memoryUsage || "0" }}%</span>
        </div>
      </template>
      <div class="chart-container">
        <div ref="memoryChartRef" class="chart"></div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
const props = defineProps({
  qemu_id: {
    type: String,
    default: "",
  },
  env_type_info: {
    type: Number,
    default: 0,
  },
});
import { ref, onMounted,  onBeforeUnmount } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import VulnDetailDialog from "@/components/vulnDetailDialog/index.vue";
import * as echarts from "echarts/core";
import { LineChart } from "echarts/charts";
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import { ElMessage } from "element-plus";
import { getEnvironmentInfo, getVulnTaskDetail } from "@/api/topo";
import { useRouter } from "vue-router";
const router = useRouter();
const monitorData = ref({});

const status = [
  { name: "停止" },
  {
    name: "运行",
  },
  { name: "停止" },
];
// 获取环境cpu、内存信息
const getEnvironmentInfoFunc = async () => {
  const res = await getEnvironmentInfo(props.qemu_id, props.env_type_info);
  if (res.code === 200) {
    console.log(res.data);
    monitorData.value = res.data;
    initCharts();
  }
};

// 注册必需的组件
echarts.use([
  LineChart,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  CanvasRenderer,
]);

// 引用和状态
const cpuChartRef = ref(null);
const memoryChartRef = ref(null);
const cpuChart = ref(null);
const memoryChart = ref(null);
const networkChart = ref(null);

// 初始化图表
const initCharts = () => {
  // CPU 图表
  cpuChart.value = echarts.init(cpuChartRef.value);
  const cpuOption = {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: monitorData.value.rateTime,
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      min: 0,
      max: 10,
      name: "%",
    },
    series: [
      {
        name: "CPU",
        type: "line",
        data: monitorData.value.cpuRate,
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(75, 192, 192, 0.8)",
              },
              {
                offset: 1,
                color: "rgba(75, 192, 192, 0.1)",
              },
            ],
          },
        },
        itemStyle: {
          color: "#4bc0c0",
        },
        smooth: true,
      },
    ],
  };
  cpuChart.value.setOption(cpuOption);

  // 内存图表
  memoryChart.value = echarts.init(memoryChartRef.value);
  const memoryOption = {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: monitorData.value.rateTime,
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      min: 0,
      max: 10,
      name: "%",
    },
    series: [
      {
        name: "内存",
        type: "line",
        data: monitorData.value.memoryRate,
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(116, 119, 231, 0.8)",
              },
              {
                offset: 1,
                color: "rgba(116, 119, 231, 0.1)",
              },
            ],
          },
        },
        itemStyle: {
          color: "#7477e7",
        },
        smooth: true,
      },
    ],
  };
  memoryChart.value.setOption(memoryOption);

  // 窗口大小变化时重绘图表
  window.addEventListener("resize", handleResize);
};

// 处理窗口大小变化
const handleResize = () => {
  cpuChart.value && cpuChart.value.resize();
  memoryChart.value && memoryChart.value.resize();
  networkChart.value && networkChart.value.resize();
};


// 组件挂载时初始化
onMounted(() => {
  getEnvironmentInfoFunc();
});

// 组件卸载前清理
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);

  // 销毁图表实例
  cpuChart.value && cpuChart.value.dispose();
  memoryChart.value && memoryChart.value.dispose();
  networkChart.value && networkChart.value.dispose();
});
</script>

<style lang="scss" scoped>
.base-container {
  width: 100%;
  .log-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .log-content {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      align-items: center;
      font-size: 14px;
    }
  }
  .resource-item {
    .log-content {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(5, 1fr);
    }
  }
}
.circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.green {
  color: #bcda5f;
}
.greenBg {
  background-color: #bcda5f;
}
.red {
  color: #da5f5f;
}
.redBg {
  background-color: #da5f5f;
}
.text-ellipsis {
  width: 72%;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
  font-size: 14px;
  text-align: right;
}
.resource-base {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}
.resource-monitor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}
.chart-container {
  width: 100%;

  .chart {
    height: 250px;
    width: 100%;
  }

  .network-chart {
    height: 300px;
  }
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .value-text {
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
